<template>
  <div class="pt-20">
    <div class="w100 pt-16 pb-16 pl-24 pr-24 bgff br-10 rowsb mb-16">
      <div class="rowscl">
        <div class="fs-16 fw-b col333 mb-10"  v-if="index == 0 && (ldType != 3 && ldType != 4)">
          劳动项目：{{ data.name }}
        </div>
         <div class="fs-16 fw-b col333 mb-10" v-else>
          劳动项目：{{data.projectName}}
        </div>
      


        <!-- --------------------- -->
        <div class="fs-12 col666 mb-10 w100">
          分类：{{data.projectName}}
        </div>
        
        <!-- <div class="fs-16 fw-b col333 mb-10" v-if="index == 0">
          劳动项目：{{ data.name }}
        </div>
        <div class="fs-16 fw-b col333 mb-10" v-else>
          劳动项目：{{
            index == 1
              ? "劳动总结报告"
              : index == 2
              ? "劳动成果"
              : data.name
              ? data.name
              : "社会公益劳动"
          }}
        </div>
        <div class="fs-12 col666 mb-10 w100 rowsb rowsm" v-if="index == 0">
          <div class="">分类:基础劳动/{{ data.typeName }}</div>
          <div class="" v-if="data.status == 2">{{ data.dfCount }}积分</div>
        </div>
        <div class="fs-12 col666 mb-10 w100" v-else>
          分类：{{
            index == 1
              ? "劳动总结报告"
              : index == 2
              ? "劳动成果"
              : "社会公益劳动"
          }}
        </div> -->
        <div class="fs-12 col666" v-if="data.bgTime">
          时间:{{ data.bgTime || "" }}
        </div>
        <div class="fs-12 col666" v-if="data.dwName">
          主办单位:{{ data.dwName || "" }}
        </div>
        <div class="fs-12 col666" v-if="data.startTime && data.stopTime">
          劳动时间:{{ data.startTime }}至{{ data.stopTime }}
        </div>
        <div class="fs-12 col666" v-if="data.position">
          劳动地点:{{ data.position }}
        </div>
        <div class="fs-12 col666" v-if="data.jbName">
          级别:{{ data.jbName }}
        </div>
        <div class="fs-12 col666" v-if="data.djName">
          等级:{{ data.djName }}
        </div>
        <div class="fs-12 col666" v-if="data.wcName">
          位次:{{ data.wcName }}
        </div>
      </div>

      <div
        class="w-80 h-30 br-15 rowsc rowsm fw-b fs-12"
        style="border: 1px solid #e33636; color: #e33636"
        v-if="data.status == 3"
      >
        已驳回
      </div>
      <div class="w-80 h-80 br-15 rowsc fw-b fs-12" v-if="data.status == 2">
        <p
          class="w-80 h-30 br-15 rowsc fw-b fs-12"
          style="border: 1px solid #00c82f; color: #00c82f; line-height: 30px"
        >
        已通过
          <!-- {{ data.markNumber ? data.markNumber : "已通过" }} -->
        </p>
        <p class="markNumber">{{ data.dfCount ? data.dfCount : "0" }}</p>
      </div>

      <div
        class="w-80 h-30 br-15 rowsc rowsm fw-b fs-12"
        style="border: 1px solid #4878ff; color: #4878ff"
        v-if="data.status == 1"
      >
        未审批
      </div>
    </div>

    <div class="w100 pt-16 pb-16 pl-24 pr-24 bgff br-10 mb-16">
      <div class="fs-16 fw-b col333 mb-10">劳动过程说明</div>
      <div class="fs-12 col666">{{ data.content }}</div>
    </div>

    <div class="w100 pt-16 pb-16 pl-24 pr-24 bgff br-10 mb-16">
      <div class="fs-16 fw-b col333 mb-10">附件</div>
     <div v-for="item in data.proFileList" :key="item.id" class="fileImage">
        <img
        :src="item.file"
        alt=""
        v-if="item.fileType == 'image'"
      />
      <!-- @click="download(data.file)" -->
      <video
        :src="item.file"
        controls
        v-if="item.fileType == 'video'"
        class="w-300"
      ></video>
      <div
        class="w100 rows rowsm"
        @click="download(item.file)"
        v-if="item.fileType == 'file'"
      >
        <img
          src="../../../static/img/file.png"
          alt=""
          class="w-30 h-30 mr-20"
        />
        <div class="col888 fs-16">{{ item.fileName }}</div>
      </div>
     </div>
    </div>

    <div
      class="w100 pt-16 pb-16 pl-24 pr-24 bgff br-10 mb-16"
      v-if="data.markName"
    >
      <div class="fs-16 fw-b col333 mb-10">
        {{ data.status == 3 ? "驳回详情" : "评语" }}
      </div>
      <div class="fs-12 col666">{{ data.markName }}</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    id: {},
    index: {},
    ldType: {},
    backIndex:{}
  },
  data() {
    return {
      data: {},
    };
  },
  watch: {},
  computed: {},
  mounted() {
    console.log('this.id',this.id)
    console.log('this.index',this.index)
     console.log('this.ldType',this.ldType)
     console.log('backIndex',this.backIndex)
     if(this.backIndex){
       console.log('2222222222222')
      if(this.backIndex ==1){
        this.getInfo(1)
      }else if(this.backIndex ==2){
       this.getInfo(4)
      }else if(this.backIndex ==4){
       this.getInfo(2)
      }else if(this.backIndex ==3){
       this.getInfo(3)
      }
    }else if (this.index == 0) {
      this.getInfo(this.ldType)
    } else{
      console.log('111111111111111111')
      this.getInfo(this.index);
    }
  },
  methods: {
    download(url) {
      console.log('////',url);
      // window.location.href = url
      window.open(url);
    },
    getInfo(val) {
      if(val == 1) {//基础劳动
        this.$axios.post("prold/getById", { id: this.id }).then((res) => {
          if (res.data.code != 200)
            return this.$notify({
              title: "提示",
              message: res.data.msg,
            });
          let { data } = res.data;
          if(data.proFileList.length >0){
            data.proFileList.forEach((item) => {
              item.file = this.$apiUploadUrl  + item.file;
            })
          }
          this.data = data;
        });
      }else if (val == 2) {//劳动公益
          this.$axios.post("proldgy/getById", { id: this.id }).then((res) => {
            if (res.data.code != 200)
              return this.$notify({
                title: "提示",
                message: res.data.msg,
              });
            let { data } = res.data;
             if(data.proFileList.length >0){
            data.proFileList.forEach((item) => {
              item.file = this.$apiUploadUrl  + item.file;
            })
          }
            this.data = data;
          });
      }else if (val == 3) {//劳动成果
          this.$axios.post("proldcg/getById", { id: this.id }).then((res) => {
            if (res.data.code != 200)
              return this.$notify({
                title: "提示",
                message: res.data.msg,
              });
            let { data } = res.data;
             if(data.proFileList.length >0){
            data.proFileList.forEach((item) => {
              item.file = this.$apiUploadUrl  + item.file;
            })
          }
            this.data = data;
          });
      }else if (val == 4) {//劳动总结
      console.log('劳动总结')
        this.$axios.post("proldzj/getById", { id: this.id }).then((res) => {
          if (res.data.code != 200)
            return this.$notify({
              title: "提示",
              message: res.data.msg,
            });
          let { data } = res.data;
           if(data.proFileList.length >0){
            data.proFileList.forEach((item) => {
              item.file = this.$apiUploadUrl  + item.file;
            })
          }
          this.data = data;
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.markNumber {
  width: 80px;
  height: 30px;
  // line-height: 30px;
  border: 1px solid #00c82f;
  color: #00c82f;
  display: block;
  margin-top: 40px;
  padding: 5px 20px;
  border-radius: 20px;
  text-align: center;
  margin-left: -80px;
}

.fileImage{
  img{
    width: 300px;
    height: 200px;
  }
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
</style>
